<div style="width: 50%">
  <h4>Basic Usage</h4>
  <d-multiple-upload
    #multipleupload
    [fileOptions]="fileOptions2"
    [uploadedFiles]="uploadedFiles2"
    [filePath]="'name'"
    [uploadOptions]="uploadOptions"
    (successEvent)="onSuccess2($event)"
    (deleteUploadedFileEvent)="deleteUploadedFile2($event)"
    (errorEvent)="onError2($event)"
    [showTip]="true"
    (fileSelect)="fileSelect($event)"
  >
  </d-multiple-upload>
  <h4>Dragdrop</h4>
  <d-multiple-upload
    #multipleupload
    [enableDrop]="true"
    [fileOptions]="fileOptions2"
    [uploadedFiles]="uploadedFiles2"
    [filePath]="'name'"
    [oneTimeUpload]="true"
    [uploadOptions]="uploadOptions2"
    (successEvent)="onSuccess2($event)"
    (deleteUploadedFileEvent)="deleteUploadedFile2($event)"
    (errorEvent)="onError2($event)"
    (fileDrop)="fileDrop($event)"
    (fileOver)="fileOver($event)"
  >
  </d-multiple-upload>
  <h4>Customize</h4>
  <div>
    <d-multiple-upload
      #multipleupload
      [fileOptions]="fileOptions2"
      [uploadedFiles]="uploadedFiles2"
      [filePath]="'name'"
      [uploadOptions]="uploadOptions"
      (successEvent)="onSuccess2($event)"
      (deleteUploadedFileEvent)="deleteUploadedFile2($event)"
      (errorEvent)="onError2($event)"
      [preloadFilesRef]="default"
    >
    </d-multiple-upload>
    <ng-template #default let-fileUploaders="fileUploaders" let-deleteFile="deleteFile" let-UploadStatus="UploadStatus">
      <table class="devui-table" *ngIf="fileUploaders.length > 0">
        <tr *ngFor="let fileUploader of fileUploaders; let index = index">
          <td width="50%">
            <span>{{ fileUploader.file.name }}</span>
          </td>
          <td width="25%">
            <span *ngIf="fileUploader.status === UploadStatus.preLoad">{{ PRELOAD }}</span>
            <span *ngIf="fileUploader.status === UploadStatus.uploading">{{ UPLOADING }}</span>
            <span *ngIf="fileUploader.status === UploadStatus.uploaded">{{ UPLOADED }}</span>
            <span *ngIf="fileUploader.status === UploadStatus.failed">{{ FAILED }}</span>
          </td>
          <td>
            <d-button
              bordered="true"
              icon="trash"
              bsStyle="danger"
              bsSize="xs"
              *ngIf="fileUploader.status !== UploadStatus.uploaded"
              [disabled]="fileUploader.status === UploadStatus.uploading"
              (btnClick)="deleteFile(fileUploader.file)"
            >
              {{ DELETE }}
            </d-button>
          </td>
        </tr>
      </table>
    </ng-template>
  </div>
  <h4>Disabled</h4>
  <d-multiple-upload
    #multipleupload
    [fileOptions]="fileOptions2"
    [uploadedFiles]="uploadedFiles2"
    [filePath]="'name'"
    [uploadOptions]="uploadOptions"
    (successEvent)="onSuccess2($event)"
    (deleteUploadedFileEvent)="deleteUploadedFile2($event)"
    (errorEvent)="onError2($event)"
    [disabled]="true"
  >
  </d-multiple-upload>
</div>
